<!-- 程序配置页面 -->
<template>
    <div class='page-box h100 display-flex czbj'>
        <div class="title-label">
            程序设置
        </div>
        <div class="mt20 jjhxeerwe">
            <n-form ref="formRef" :model="formValue" label-width="130" :inline="false" size="normal" label-placement="left"
                class="mt20">
                <n-grid :cols="24" :x-gap="20" :y-gap="20">
                    <n-form-item-gi span="12" label="免费使用次数:" path="zdkey">
                        <n-input-number v-model:value="formValue.numberUse" placeholder="" size="medium" />
                        <span class="z9 fz12">免费次数请填写9999</span>
                    </n-form-item-gi>
                    <n-form-item-gi span="24" label="支付选项:" path="zdkey">
                        <n-dynamic-input v-model:value="formValue.PaymentOption" :on-create="onCreate" show-sort-button>
                            <template #create-button-default>
                                点击新建支付选项
                            </template>
                            <template #default="{ value }">
                                <div style="display: flex; align-items: center; width: 100%">
                                    <n-input v-model:value="value.label" placeholder="选项名称" size="medium"
                                        clearable></n-input>
                                    <n-input v-model:value="value.value" placeholder="选项值" size="medium" clearable
                                        class="ml20 sdfsdstrt"></n-input>
                                </div>
                            </template>
                        </n-dynamic-input>
                    </n-form-item-gi>
                    <n-form-item-gi span="24" label="&nbsp;" path="zdkey">
                        <n-button type="primary" size="medium" @click="saveFun" class="save-btn">保存</n-button>
                    </n-form-item-gi>

                </n-grid>
            </n-form>
        </div>

    </div>
</template>
<script lang='ts' setup>
import { ref } from "vue"
import { callBack, dxpost, qurl, dxget } from "../../util/index"

const isbj = ref(false) // 是否为编辑的状态
const apiurl = 'dxgjAdmin/dxglobalSetting'
const sxname = "chatGPTcx"
let bjid = 0


const formValue = ref({
    numberUse:5, //免费使用次数
    PaymentOption: []

})
const onCreate = () => {
    return {
        label: '',
        value: ''
    }
}


const initData = async () => {
    const { data }: any = await dxget(apiurl, { sxname, roleId: localStorage.id })
    if (data.length <= 0) {
        return
    }
    isbj.value = true
    bjid = data[0].id
    const dataw = JSON.parse(data[0].text)
    if (dataw.numberUse) {
        formValue.value.numberUse = dataw.numberUse
    }
    if (dataw.PaymentOption) {
        formValue.value.PaymentOption = dataw.PaymentOption
    }
}
initData()



// 保存
const saveFun = async()=>{
    if (!isbj.value) {
        const { errno }: any = await dxpost(apiurl, { sxname, roleId: localStorage.id, text: JSON.stringify(formValue.value) })
        if (errno == 0) {
            window.$message.success('操作成功！')
            return
        }
    } else {
        const { errno }: any = await dxpost(apiurl, { id: bjid, text: JSON.stringify(formValue.value) }, 'put')
        if (errno == 0) {
            window.$message.success('保存成功！')
        }
    }
}
</script>
<style scoped>
.jjhxeerwe {
    width: 800px;
}
.save-btn{
    width: 200px;
}
</style>